<template>
  <!-- <dv-border-box-10 title="item7" class="item item-7"></dv-border-box-10> -->
  <div class="item item-7">
    <div class="subitem sub1">
      <div class="left">
        <img src="./imgs/cpkc.png"alt="">
      </div>
      <div class="right">
        <div class='title'>成品库存</div>
        <div class='content' style='color: #03D9EB'>{{ dataRef?.finishedInventory }} T</div>
      </div>
    </div>
    <div class="subitem sub2">
      <div class="left">
        <img src="./imgs/ylkc.png" alt="">
      </div>
      <div class="right">
        <div class='title'>原材库存</div>
        <div class='content' style="color: #F59A23">{{ dataRef?.materialInventory }} T</div>
      </div>
    </div>
    <div class="subitem sub3">
      <div class="left">
        <img src="./imgs/kchz.png" alt="">
      </div>
      <div class="right">
        <div class='title'>库存汇总</div>
        <div class='content' style='color: #70B603'>{{ dataRef?.total }} T</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getProsalestore } from '@/api/dataBoard';
import { onMounted, ref, defineProps } from 'vue';
import * as formatLocalData from '../formatLocalData';

const props = defineProps<{
  isComp: boolean
}>()
const dataRef = ref();

const fetch = async () => {
  let res;
  if (props.isComp) {
    res = await formatLocalData.getTotal();
  } else {
    res = await getProsalestore();
  }
  if (res) {
    dataRef.value = res;
  }
}

onMounted(() => {
  fetch();
})
</script>

<style lang="scss" scoped>

.item-7 {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;

  .sub1 {
    // background-image: url("./imgs/blue.svg");
    // background-repeat: no-repeat;
    // background-position: top center;
    background: linear-gradient(180deg, rgba(4, 37, 90, 1) 0%, rgba(4, 37, 90, 1) 0%, rgba(16, 35, 87, 1) 68%, rgba(2, 61, 101, 1) 100%, rgba(2, 61, 101, 1) 100%);
  }

  .sub2 {
    // background-image: url("./imgs/yellow.svg");
    // background-repeat: no-repeat;
    // background-position: top center;
    background: linear-gradient(180deg, rgba(4, 37, 90, 1) 0%, rgba(4, 37, 90, 1) 0%, rgba(36, 38, 87, 1) 68%, rgba(59, 51, 100, 1) 100%, rgba(59, 51, 100, 1) 100%);
  }

  .sub3 {
    // background-image: url("./imgs/green.svg");
    // background-repeat: no-repeat;
    // background-position: top center;
    background: linear-gradient(180deg, rgba(4, 37, 90, 1) 0%, rgba(4, 37, 90, 1) 0%, rgba(36, 38, 87, 1) 68%, rgba(59, 51, 100, 1) 100%, rgba(59, 51, 100, 1) 100%);
  }

  .subitem {
    display: flex;
    flex-basis: 33.33%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    .left{
      flex-shrink: 0;
      img{
        width: 6vh;
        height: 6vh;
      }
    }
    .right {
      color: #FFF;

      .title {
        font-size: 2.2vh;
      }

      .content {
        margin-top: 10px;
        font-size: 3vh;
        text-align: center;
      }
    }
  }
  @media screen and (max-width: 800px) {
    display: block;
    padding-top: 10x;
    .subitem{
      margin-top: 10px;
      height: 10vh;
    }
  }
}
</style>
